<!-- 地址编辑 -->
<template>
  <div>
    <van-nav-bar
      title="新增地址"
      left-text=""
      left-arrow
      @click-left="jump" />
    <van-address-edit
      :area-list="areaList"
      :address-info="AddressInfo"
      show-delete
      show-set-default
      show-search-result
      show-area
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete" />
  </div>
</template>
<script>
import { areaList } from "@vant/area-data";
export default {
  data() {
    return {
      areaList,
      AddressInfo: {},
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    onSave(content) {
      let isDefault = content.isDefault ? "1" : "0";
      let form = {};

      //数据库该项设置为0，1，如不需修改可删除该行
      //如果地址id不存在，则连接新增地址接口，存在则连接修改地址接口

      if (!this.$route.query.id) {
        this.form = {
          userId: this.$route.query.UserId,
          addressName: content.name,
          phone: content.tel,
          province: content.province,
          city: content.city,
          district: content.county,
          detail: content.addressDetail,
          isDefault: isDefault,
        };

        //发送请求连接新增地址接口
        var _this = this;
        this.$http
          .post("/address/add", this.form)
          .then(function (response) {
            console.log(response);
            if (response.data.code == 200) {
              _this.$toast.success("保存成功");
              _this.jump();
              //原始js重新请求
            } else {
              _this.$message("操作失败");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      } else {
        this.form = {
          addressId: content.id,
          userId: this.$route.query.UserId,
          addressName: content.name,
          phone: content.tel,
          province: content.province,
          city: content.city,
          district: content.county,
          detail: content.addressDetail,
          isDefault: isDefault,
        };

        //发送请求连接新增地址接口
        var _this = this;
        this.$http
          .post("/address/update", this.form)
          .then(function (response) {
            console.log(response);
            if (response.data.code == 200) {
              _this.$toast.success("保存成功");
              _this.jump();
              //原始js重新请求
            } else {
              _this.$message("操作失败");
            }
          })
          .catch(function (error) {
            console.log(error);
          });
      }
    },

    onDelete() {
      let id = this.$route.query.id;
      var _this = this;
      this.$http
        .delete("/address/deleteById?id=" + id) //指定请求的url及参数  get
        .then(function (response) {
          //正确返回对象的处理
          // handle success
          console.log(response);
          //JSON.stringify   把json转换为json字符串，方便查看
          console.log(JSON.stringify(response));
          //直接使用this 会指 axios对象  错误
          // this.tableData
          //判断返回值是否正确
          if (response.data.code == 200) {
            _this.$toast.success("删除成功");
            _this.jump();
          } else {
            //错误提示信息
            _this.$message.error("错了哦，这是一条错误消息");
          }
        })
        .catch(function (error) {
          //错误的处理
          // handle error
          console.log(error);
        });
    },
    jump() {
      this.$router.push({
        name: "AddressList",
      });
    },
    searchFor() {
      var _this = this;
      this.$http
        .get(
          "/area/queryByAreaName?areaName=" +
            this.AddressInfo.country +
            "&province=" +
            this.AddressInfo.province +
            "&city=" +
            this.AddressInfo.city
        )
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            _this.AddressInfo.areaCode = response.data.data + "";
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
  },
  created() {
    //获取地址列表传的地址id
    let id = this.$route.query.id;
    //地址id存在则发请求回显地址
    if (id) {
      //发送请求获取地址内容
      var _this = this;
      this.$http
        .get("/address/queryById?id=" + id)
        .then(function (response) {
          console.log(response);
          if (response.data.code == 200) {
            let listA = response.data.data;
            let aaa = listA.isDefault == "1" ? true : false;
            _this.AddressInfo = {
              id: listA.addressId, //收货人信息初始值
              name: listA.addressName, //姓名
              tel: listA.phone, //电话
              province: listA.province, //省份
              city: listA.city, //城市
              country: listA.district, //区县
              areaCode: "",
              addressDetail: listA.detail, //详细地址
              isDefault: aaa, //是否选择默认
            };
            _this.searchFor();
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    }
  },
};
</script>
